<% layout('layout/layout') %>
<% block('header').append(`<style>
    .img_file{
        width:100px;
        height:100px;
        border:1px solid #e3e3e3;
        position:relative;
    }
    .img_file:after{
        content:"+";
        position:absolute;
        width:100%;
        height:100%;
        font-size:30px;
        text-align:center;
        line-height:100px;
    }

    ul.add_img_list {
        padding:0;
        margin:0;
        list-style:none;
    }
    ul.add_img_list li.img {
         width:100px;
        height:100px;
        margin-right:5px;
        margin-bottom:5px;
        border:1px solid #e3e3e3;
        position:relative;
        float:left;
    }
    ul.add_img_list li.img_file{
        float:left;
        margin-right:5px;
        margin-bottom:5px;
    }
    ul.add_img_list li.img i.del {
        background: rgba(51, 51, 51, 0.72);
        color: #FFF;
        padding: 2px 5px;
        position: absolute;
        display: block;
        top: 0;
        right: 0;
    }
    ul.add_img_list li.img i.del:hover {
        background: rgba(185, 0, 0, 0.5);
    }

</style>`) %>
<div class="row">
  <div class="col-md-12">
    <div class="box box-info">
      <div class="box-header with-border">
        <h3 class="box-title">添加产品</h3>
      </div>
      <!-- /.box-header -->
      <!-- form start -->
      <form action="<%=assetsPath %>/goods/add" method="post" class="form-horizontal" novalidate>
        <div class="box-body">
          <div class="form-group">
            <label for="name" class="col-sm-2 control-label">产品名称</label>
            <div class="col-sm-10">
              <input name="name" value="<%=curr.name || '' %>" type="text" class="form-control"  placeholder="产品名称">
            </div>
          </div>
          <div class="form-group">
            <label for="subName" class="col-sm-2 control-label">产品简介</label>
            <div class="col-sm-10">
              <input name="subName" value="<%=curr.subName || '' %>" type="text" class="form-control"  placeholder="产品简介">
            </div>
          </div>
          <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                  <label for="virPrice" class="col-sm-6 control-label">原价</label>
                  <div class="col-sm-6">
                    <input name="virPrice" value="<%=curr.virPrice || '' %>" type="text" class="form-control"  placeholder="参考价格">
                  </div>
                </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label for="sellPrice" class="col-sm-6 control-label">售卖价格</label>
                <div class="col-sm-6">
                  <input name="sellPrice" value="<%=curr.sellPrice || '' %>"  type="text" class="form-control"  placeholder="售卖价格">
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label for="stock" class="col-sm-6 control-label">库存</label>
                <div class="col-sm-6">
                  <input name="stock"  value="<%=curr.stock || '' %>" type="text" class="form-control"  placeholder="库存数量">
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-4">
              <div class="form-group">
                <label for="unit" class="col-sm-6 control-label">单位</label>
                <div class="col-sm-6">
                  <input name="unit"  value="<%=curr.unit || '' %>" type="text" class="form-control"  placeholder="例：500克/份">
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label for="place" class="col-sm-6 control-label">产地</label>
                <div class="col-sm-6">
                  <input name="place" value="<%=curr.place || '' %>" type="text" class="form-control"  placeholder="产地">
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label for="brands" class="col-sm-6 control-label">品牌名称</label>
                <div class="col-sm-6">
                  <input name="brands"  value="<%=curr.brands || '' %>" type="text" class="form-control"  placeholder="品牌名称">
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-4">
              <div class="form-group">
                <label for="unit" class="col-sm-6 control-label">营养值</label>
                <div class="col-sm-6">
                  <input name="dietVal"  value="<%=curr.dietVal || '' %>" type="text" class="form-control"  placeholder="营养值">
                </div>
              </div>
            </div>
            <div class="col-sm-4">
            </div>
            <div class="col-sm-4">
            </div>
          </div>
          <div class="form-group">
            <label for="title" class="col-sm-2 control-label">商品缩略图</label>
            <div class="col-sm-10">
              <!--<a id="imgUpload" class="btn  btn-sm btn-success">图片上传</a>-->
              <!--<input id="imgInput" name="imgTmb" type="hidden" value="<%=curr.imgTmb || ''%>">-->
              <div id="showImg" class="show_img" style="width:200px;border:1px solid #e3e3e3;" >
                  <% if (curr.imgTmb){ %>
                <!--<i class="ionfont "></i>-->
                    <img src="<%=curr.imgTmb %>" style="max-height:100%;max-width:100%" >
                  <% }%>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="title" class="col-sm-2 control-label">商品图片</label>
            <div class="col-sm-10">
              <div class="img_list_wrap clearfix">
                <ul class="add_img_list">
                  <% curr.imgs && curr.imgs.forEach(function(item) { %>
                  <li class="img"  data-tmb="<%=item %>" style="background:url(<%=item %>)  no-repeat center;background-size:cover;">
                    <i class="del fa  fa-trash-o"></i>
                  </li>
                  <% })%>
                  <li class="img_file"></li>
                </ul>
                <input name="imgs" type="hidden" class="imgs_input" value="<%=curr.imgs && curr.imgs.join(',') %>">
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="catalogStr" class="col-sm-2 control-label">所属类别</label>
            <div class="col-sm-10">
              <select name="catalogStr" class="form-control">
                  <% goodTypes.forEach(function(item){ %>
                <option <%=(curr.catalogId &&  item._id.toString() === curr.catalogId.toString())?'selected':'' %>
                        value="<%=item._id %>|<%=item.name%>|<%=item.calPath %>,<%=item.name %>">
                    <%=item.deepStr%><%=item.nameCn %>
                </option>
                  <% })%>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="content" class="col-sm-2 control-label">产品详情</label>
            <div class="col-sm-10">
              <div id="editor"><%-curr.content || '' %></div>
              <textarea id="content" hidden name="content"><%-curr.content || '' %></textarea>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-4">
              <div class="form-group">
                <label for="isHot" class="col-sm-6 control-label">产品推荐类型</label>
                <div class="col-sm-6">
                  <select name="isHot" class="form-control">
                    <option <%=curr.isHot === 0?'selected':'' %> value="0">普通商品</option>
                    <option <%=curr.isHot === 1?'selected':'' %> value="1">推荐商品</option>
                    <option <%=curr.isHot === 2?'selected':'' %> value="2">热卖商品</option>
                    <option <%=curr.isHot === 3?'selected':'' %> value="3">新品上市</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label for="onSale" class="col-sm-6 control-label">产品上下架</label>
                <div class="col-sm-6">
                  <select name="onSale" class="form-control">
                    <option <%=curr.onSale === 1?'selected':'' %> value="1">上架</option>
                    <option <%=curr.onSale === 0?'selected':'' %> value="0">下架</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label for="sort" class="col-sm-6 control-label">排序</label>
                <div class="col-sm-6">
                  <input name="sort" value="<%=curr.sort || 0 %>" type="text" class="form-control"  placeholder="排序">
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
          <div class="col-sm-offset-2 col-sm-10">
            <% if(curr._id) { %>
             <input name="_id" type="hidden" value="<%=curr._id%>">
            <% }%>
            <button type="submit" class="btn btn-info ">保存</button>
            <button type="reset" class="btn btn-default">重置</button>
          </div>
        </div>
        <!-- /.box-footer -->
      </form>
    </div>
  </div>
</div>
<% block('footer').append(`<script src="${assetsPath}/js/uploadImg.js"></script>`); %>
<% block('footer').append(`<script src="${assetsPath}/js/wangeditor/wangEditor.js"></script>`); %>
<% block('footer').append(`<script>
jQuery(function() {
	function createImg () {
		var img
		return function (url,cb) {
			if (!img) {
                img = new Image()
                img.src = url
                img.style['max-width'] = '100%'
                img.style['max-height'] = '100%'
                img.onload = function () {
                    img.onload = null
                    cb(img)
                }
            } else {
				img.src = url
				img.onload =function () {
					img.onload = null
					cb(img)
				}
            }
		}
	}
	var getImg =  createImg()
//	$('#imgUpload').uploadImg(function(imgs){
//    	if (imgs && imgs.length > 0) {
//            var url = imgs[0].thumb.url
//    	    $('#imgInput').val(url)
//            getImg(url,function(img){
//               $('#showImg').empty().append(img)
//            })
//    	}
//    })


    var $imgListWrap = $('.img_list_wrap')
    var $imgsInput = $('.imgs_input',$imgListWrap)
    var $imgFile = $('.img_file',$imgListWrap)
    var maxImg = 4
    function imgsInit(arr) {
    	arr.forEach(function(item) {
    		var $li = $('<li class="img" data-tmb="'+item+'"><i class="del  fa  fa-trash-o"></i></li>')
            $li.css({"background":'url('+item+')  no-repeat center', 'background-size': 'cover'})
            $imgFile.before($li)
    	})
    }
    $imgListWrap.on('click','.del',function(){
    	var $this = $(this)
    	var $img=$this.closest('.img')
    	$imgsInput.val(getImgsStr($imgListWrap,$img))
    	$img.remove()
    	maxUpload(maxImg)
    })
    function maxUpload (max) {
    	var imgs = $imgListWrap.find('.img')
        if(imgs.length >= max) {
            $imgFile.hide()
        }
        if(imgs.length < max){
            $imgFile.show()
        }
    }
    function getImgsStr ($imgWrap,$noOne) {
    	var tmp = []
    	$imgWrap.find('.img').each(function(index,el){
    		var $el = $(el)
    		if ($noOne) {
    			if($el.data('tmb') !== $noOne.data('tmb')) {
    		        tmp.push($el.data('tmb'))
    		    }
    		} else {
    			tmp.push($el.data('tmb'))
    		}
    	})
    	return tmp.join(',')
    }
    $imgFile.uploadImg(function(imgs){
    	console.log(imgs)
    	var $this = $(this)
    	var $li = $('<li class="img" data-tmb="'+imgs[0].thumb.url+'"><i class="del  fa  fa-trash-o"></i></li>')
    	$li.css({"background":'url('+imgs[0].thumb.url+')  no-repeat center', 'background-size': 'cover'})
    	$this.before($li)
    	$imgsInput.val(getImgsStr($imgListWrap))
    	maxUpload(maxImg)
    })
})
</script>`) %>